<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="box">
		<view class="noticeBox" v-for="(item,index) in list" :key="index" @click="handelClick(item)" >
			<view class="content">
				<view class="avatarUrl">
					<u-avatar :src="item.type===3?imgxtsrc:item.avatarUrl" shape="circle" :size="40"></u-avatar>
				</view>
				<view class="avatarName">
					<view class="self-right">
						<span class="name">{{decodeURI(item.nickName)}}</span>
						<span class="p">
							<text class="p-txt">{{decodeURI(item.content)}}</text>
						</span>
					</view>
				</view>
				<view class="right">
					<text class="p-txt">{{getTime(item.createTime)}}</text>
				</view>
			</view>
			<view style="padding-left: 100rpx;padding-right: 24rpx;">
				<u-gap height="2rpx" marginTop="30rpx" bgColor="#F1F3F5"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			type: String
		},
		data() {
			return {
				imgxtsrc:this.$store.state.baseurl+"static/image/xt1.png"
			}
		},
		methods: {
			handelClick(item) {
				console.log(item)
				if (item.type) {
					this.$u.route({
						url: 'pages/componet/notice/systemnotice?id=' + item.id + '&state=' + item.state
					})
				}
			},
			getTime(val) {
				const datetime = new Date(val)
				return uni.$u.timeFrom(datetime.getTime())
			},
		},
	}
</script>

<style scoped lang="scss">
	.noticeBox {
		padding: 32rpx 0 0 24rpx;
		background: #FFFFFF;
	}

	.content {
		display: fixd;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.avatarUrl {
		width: 80rpx;
		height: 80rpx;
	}

	.avatarName {
		width: 480rpx;
		height: 80rpx;
	}

	.name {
		margin-top: 2rpx;
		height: 42rpx;
		font-family: HarmonyHeiTi-Medium;
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
		display: block;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	.self-right {
		padding-left: 20rpx;
	}

	.right {
		position: absolute;
		width: 200rpx;
		height: 32rpx;
		font-family: HarmonyHeiTi;
		font-size: 24rpx;
		color: #9E9E9E;
		text-align: right;
		font-weight: 400;
		top: 44rpx;
		right: 24rpx;

	}

	.p {
		width: 300rpx;
		height: 45rpx;
		font-family: HarmonyHeiTi;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		font-weight: 400;
	}

	.p-txt {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 24rpx;
	}
</style>
